<template>
  <div>
    <div class="item">
      <div class="poster">
        <img :src="movie.poster">
      </div>
      <div class="intro">
        <h3>{{movie.title}}</h3>
        <el-rate
                v-model="rank"
                disabled
                text-color="#ff9900"
                text-template="{value}">
        </el-rate>
        <p>{{movie.rank}}分</p>
        <p>导演：{{movie.directors.join('，')}}</p>
        <p>主演：{{movie.actors.join('，')}}</p>
      </div>
    </div>
    <hr>
  </div>
</template>

<script>
  export default{
      props:{
          movie:{
              type: Object,
              required:true
          }
      },
      data:function () {
        return {
            rank: this.movie.rank / 2
        }
      },
      computed:{
      }
  }
</script>

<style lang="scss" scoped>
  .item{
    position: relative;

    .poster{
      width: 65px;
      height: 100px;
      font-size: 0;

      position: absolute;
      bottom: 0;

      img{
        max-width: 100%;
        max-height: 100%;
      }
    }

    .intro{
      margin-left: 75px;

      h3{
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 10px;
      }
      p{
        font-size: 14px;
        color: #666;
      }
    }

    .el-rate{
      height: auto;
      .el-rate__icon{
        font-size: 14px;
      }
    }
  }
  hr{
    margin: 10px 0 20px 0;
    border: none;
    border-bottom: 1px solid #d6d6d6;
  }
</style>
